<template>
	<view class="login flex column justify-center items-center">
		<view class="containe mt-54 w100" v-if="AccountStatus">
			<div v-if="franchiseeApplyRecordId" class="view flex px-48" style="color:#f00">
				审核不通过原因:{{reason}}
			</div>
			<view class="view form mt-40 mb-90 px-48 flex column justify-center">
				<up-input fontSize="32rpx" color="rgba(0, 0, 0, 0.4)" placeholder="请输入专营商姓名" 
					:border="'bottom'" v-model="form.name">
					<template #prefix>
						<up-text text="专营商姓名" margin="0 3px 0 0" type="tips"></up-text>
					</template>
				</up-input>
				<up-input fontSize="32rpx" color="rgba(0, 0, 0, 0.4)" placeholder="请输入店铺名称" :border="'bottom'"
					v-model="form.shopName">
					<template #prefix>
						<up-text text="店铺名称" margin="0 18px 0 0" type="tips"></up-text>
					</template>
				</up-input>
				<up-input fontSize="32rpx" color="rgba(0, 0, 0, 0.4)" placeholder="请输入手机号/账号" :border="'bottom'"
					v-model="form.mobile">
					<template #prefix>
						<up-text style="width: 200rpx;" text="手机/账号" margin="0 10px 0 0" type="tips"></up-text>
					</template>
				</up-input>
				<up-input fontSize="32rpx" color="rgba(0, 0, 0, 0.4)" placeholder="请输入密码" :border="'bottom'"
					v-model="form.password" :type="showbrowse?'text':'password'">
					<template #prefix>
						<up-text text="密码" margin="0 46px 0 0" type="tips"></up-text>
					</template>
					<template #suffix>
						<image class="pwicon" v-if="showbrowse" :src="IMG_URL2 + 'login/browse.svg'" @click="changeBrowse" />
						<image class="pwicon" v-else :src="IMG_URL2 + 'login/browse-off.svg'" @click="changeBrowse" />
					</template>
				</up-input>
			</view>
			<view class="choosebox flex items-center px-48 f-28" @click="onCheckDefault">
				<image class="icon-width mr-8" v-if="checked" :src="IMG_URL2+'login/checkbox1.svg'" />
				<image class="icon-width mr-8" v-else :src="IMG_URL2+'login/checkbox.svg'" />
				<text>我已阅读并同意</text>
				<text class="tip-text" @click.stop="onAgreement">《用户协议》</text>
				<text>和</text>
				<text class="tip-text" @click.stop="onPrivacy">《隐私政策》</text>
			</view>
			<button class="login-btn mt-32 f-32 white" @click="onRegisterFranchisee" :disabled="loading">
				<up-loading-icon class="loading" color="#fff" size="16" :show="loading"></up-loading-icon>
				<text>申请专营商账号</text>
			</button>
		</view>
		<view v-if="!AccountStatus" class="w100 submitTips">
			<view class="w100 mt-90 flex justify-center items-center flex-wrap">
				<view class="w100 mt-20 flex justify-center items-center"><image class="logo" :src="IMG_URL2 + 'common/check-circle.svg'" /></view>
				<view class="mt-20 f-24 white titinfo" v-if="applicationtype!=1">提交成功，系统审核中</view>
				<view class="mt-20 f-24 white titinfo" v-if="applicationtype==1">已提交，专营商信息在审核中</view>
			</view>
			<view class="complete-btn" @click="completeFun">完成</view>
		</view>
		<PrivacyPop :showPrivacy="showPrivacy" @privacyclose="privacyclose" />
	</view>
</template>

<script setup>
import { IMG_URL2 } from "@/config";
import {  shopApi } from "@/api";
import PrivacyPop from '@/components/PrivacyPop.vue'
let applicationtype=ref('')
let showPrivacy=ref(false)

const form = ref({
	name: '',
	shopName: '',
	mobile: "",
	password: "",
	// franchiseeApplyRecordId:0
});
let franchiseeApplyRecordId=ref('')
const checked = ref(false);
let reason = ref('')
let AccountStatus = ref(true);
const showbrowse = ref(false);
const loading = ref(false);
const getFranchiseeApplyRecordId = ()=>{
	shopApi.FRANCHISEEGETREGISTERFRANCHISEEINFOBYID({id:franchiseeApplyRecordId.value}).then((res) => {
		if (res.code == 200) {
			AccountStatus.value = true
			form.value.name = res.result.name
			form.value.shopName = res.result.shopName
			form.value.mobile = res.result.mobile
			form.value.password = res.result.password
			reason.value = res.result.reason
			checked.value = true
		} else {
			uni.showToast({
				title: res.errMsg,
				icon: "none",
				duration: 1000
			});
		}
	});
}

onLoad((options) => {
	if(options.id){
		franchiseeApplyRecordId.value = options.id
		getFranchiseeApplyRecordId()
	}
	if(options.type){
		applicationtype.value = options.type
		AccountStatus.value = false
	}
});
const changeBrowse = () => {
	showbrowse.value = !showbrowse.value;
};
const onRegisterFranchisee = () => {


	if (form.value.name.trim() == "") {
		uni.showToast({
			title: "请输入专营商姓名",
			icon: "none",
			mask: true
		});
		return;
	}
	if (form.value.shopName.trim() == "") {
		uni.showToast({
			title: "请输入店铺名称",
			icon: "none",
			mask: true
		});
		return;
	}
	if (form.value.mobile.trim() == "") {
		uni.showToast({
			title: "请输入手机号",
			icon: "none",
			mask: true
		});
		return;
	}
	if (form.value.password.trim() == "") {
		uni.showToast({
			title: "请输入密码",
			icon: "none",
			mask: true
		});
		return;
	}
	if (!checked.value) {
		uni.showToast({
			title: "阅读并同意《用户协议》和《隐私政策》",
			icon: "none"
		});
		return;
	}
	if(franchiseeApplyRecordId.value){
		form.value.franchiseeApplyRecordId = franchiseeApplyRecordId.value
	}
	loading.value = true;
	shopApi.FRANCHISEEREGISTERFRANCHISEE(form.value).then((res) => {
		loading.value = false;
		if (res.code == 200) {
			AccountStatus.value = false
		} else {
			uni.showToast({
				title: res.errMsg,
				icon: "none",
				duration: 1000
			});
		}
	});
};

const privacyclose=()=>{
  showPrivacy.value = false
  wx.openPrivacyContract()
}
const onPrivacy = () => {
    // #ifdef MP
    if (wx.getPrivacySetting) {
      wx.getPrivacySetting({
        success: res => {
            if (res.needAuthorization) {
                console.log(res,'')
                showPrivacy.value = true
            } else {
                console.log('已授权')
                wx.openPrivacyContract()
            }
        },
        fail: () => {},
        complete:() => {}
    })    
  }
  // #endif
  
  // uni.navigateTo({ url: `/pages/agreement/index` });
};
// 选中服务条款
const onCheckDefault = () => {
	checked.value = !checked.value;
};

// 服务条款
const onAgreement = () => {
	uni.navigateTo({ url: `/pages/agreement/index` });
};

const completeFun = () => {
	uni.reLaunch({url: "/pages/login/login"});
}

</script>

<style>
page {
	background-color: #ffffff;
}
</style>
<style lang="scss" scoped>
.login {
	width: 100%;
	.logo {
		width: 160rpx;
		height: 160rpx;
		margin-bottom: 40rpx;
	}

	.login-tit {
		font-family: PingFang SC;
		font-size: 18px;
		line-height: 26px;
		text-align: left;
	}
	.titinfo {
		font-family: PingFang SC;
		font-size: 20px;
		font-weight: 600;
		line-height: 28px;
		text-align: center;

	}
	.pwicon{
		width: 48rpx;
		height: 48rpx;
		margin-top: 50rpx;
	}

	.complete-btn{
		background: rgba(253, 236, 219, 1);
		font-family: PingFang SC;
		font-size: 16px;
		font-weight: 600;
		line-height: 24px;
		text-align: center;
		color: rgba(145, 74, 0, 1);

		width: 319px;
		margin:90px auto 0px;
		padding: 12px 20px 12px 20px;
		box-sizing: border-box;
		border-radius: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
	}


	.choosebox {
		color: rgba(0, 0, 0, 0.9);
		font-size: 24rpx;
	}

	.login-btn {
		width: 654rpx;
		height: 92rpx;
		line-height: 92rpx;
		background: #D68E44;
		color: #ffffff;
		text-align: center;
		border-radius: 64px;
		font-size: 32rpx;
		display: flex;
    	justify-content: center;
	}

	.login-btn:after {
		border: none;
	}

	.icon-width {
		width: 40rpx;
		height: 40rpx;
	}

	.tip-text {
		color: #D68E44;
	}

	:deep(.u-input) {
		padding: 0rpx !important;
		background: #ffffff;
	}

	:deep(.u-input__content) {
		height: 100rpx;
		line-height: 100rpx;
	}

	:deep(.uni-input-wrapper) {
		font-size: 32rpx;
	}
	.submitTips{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 999;
        background-color: rgba(255, 255, 255, 1);
        .submitTipsBox{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .complete-btn{
            background: rgba(253, 236, 219, 1);
            font-family: PingFang SC;
            font-size: 16px;
            font-weight: 600;
            line-height: 24px;
            text-align: center;
            color: rgba(145, 74, 0, 1);

            width: 319px;
            margin:90px auto 0px;
            padding: 12px 20px 12px 20px;
            box-sizing: border-box;
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }

}
</style>